<template>
  <div class="flex items-center justify-center w-full h-full">
    <div class="w-full max-w-md px-10 mx-auto">
      <div class="text-[#170F49] text-xl font-bold text-center">登录到你的账户</div>
      <div class="mt-20">
        <div class="flex flex-col justify-between">
          <div class="text-base text-[#170F49]">账号</div>
          <van-field
            v-model="username"
            class="mt-4 rounded-full h-14"
            placeholder="请输入你的账号"
          />
        </div>
        <div class="text-base text-[#170F49] mt-8">密码</div>
        <van-field
          v-model="password"
          class="mt-4 rounded-full h-14"
          type="password"
          placeholder="请输入你的密码"
        />
        <div class="flex items-center mt-8">
          <van-checkbox v-model="rememberPassword">记住密码</van-checkbox>
        </div>
        <div class="mt-16">
          <van-button size="large" round @click="Login">登录</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter, useRoute } from 'vue-router'
import { login,getUserTasks } from '@/api/api'
import { setToken } from '@/utils/auth'
import { useUserStore } from '@/stores/user'
import { ref, onMounted } from 'vue'
import { showSuccessToast, showFailToast } from 'vant'

const route = useRoute()
const userStore = useUserStore()

// 从 URL 获取 device_id 并存储
const deviceId = route.query.device_id
userStore.setDeviceId(deviceId)

const router = useRouter()
const username = ref('')
const password = ref('')
const rememberPassword = ref(false)

// 组件加载时检查本地存储
onMounted(() => {
  const savedUsername = localStorage.getItem('username')
  const savedPassword = localStorage.getItem('password')
  const remembered = localStorage.getItem('rememberPassword')

  if (remembered === 'true' && savedUsername && savedPassword) {
    username.value = savedUsername
    password.value = savedPassword
    rememberPassword.value = true
  }
})

const Login = async () => {
  console.log(username.value, password.value)
  try {
    const res = await login({
      account: username.value,
      password: password.value
    })
    if (res.code === 200) {
      console.log(res)
      userStore.setUsername(res.user.username)
      showSuccessToast('登录成功！')
      setToken(res.token)
      // userStore.setUserTasks(res.inspection_tasks)
      const userTaskRes = await getUserTasks()
      userStore.setUserTasks(userTaskRes.inspection_tasks)
      router.push('/inspection')
      // 处理记住密码
      if (rememberPassword.value) {
        localStorage.setItem('username', username.value)
        localStorage.setItem('password', password.value)
        localStorage.setItem('rememberPassword', 'true')
      } else {
        localStorage.removeItem('username')
        localStorage.removeItem('password')
        localStorage.setItem('rememberPassword', 'false')
      }
    } else {
    }
  } catch (error) {
    showFailToast('账号或密码错误！')
  }
}
</script>

<style lang="scss" scoped>
.van-field {
  //   background-color: red;
  width: 100%;
  border: 1px solid #eff0f6;
  box-shadow: 0 2px 7px 0 rgba(19, 18, 66, 0.07);
  font-size: 1rem;
}
:deep(.van-field__body) {
  height: 2.2rem !important;
}
:deep(.van-field__control) {
  height: 2.2rem !important;
}
.van-button {
  width: 100%;
  background-color: rgba(67, 183, 162, 1);
  color: white;
  font-weight: 600;
  height: 3.5rem;
}
</style>
